<template>
  <div class="asideTab">
    <el-tabs
      v-model="activeName"
      tab-position="left"
      style="height: 100%"
      @tab-click="handleClick"
    >
      <el-tab-pane label="大气反应" name="reaction"></el-tab-pane>
      <el-tab-pane label="催化反应" name="catalytic"></el-tab-pane>
      <el-tab-pane label="降解菌" name="bacteria"></el-tab-pane>
      <el-tab-pane label="降解菌群" name="bacterias"></el-tab-pane>
      <el-tab-pane label="致癌与非致癌风险" name="health"></el-tab-pane>
      <el-tab-pane label="焦化行业" name="coking"></el-tab-pane>
      <el-tab-pane label="制药行业" name="pill"></el-tab-pane>
      <el-tab-pane label="石油行业" name="oil"></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
    name: 'asideTab',
    props: {
        radio: String,
        searchVocDetails: String,
        vocId: String,
        vocNext: String,
        path: String
  },
  data() {
    return {
      activeName: this.path,
      SearchVocDetails: "",
      VocId: "",
      VocNext: "",
    };
  },
  methods: {
    handleClick(tab) {
        this.$router.push({
        path: tab._props.name,
        query: {
          searchVocDetails: this.SearchVocDetails,
          vocId: this.VocId,
          vocNext: this.VocNext,
        },
      });
    },

  },
  mounted(){
    this.activeName = this.path
  },
  watch: {
    path: {
      handler(newValue) {
        this.Path = newValue;
      },
    },
    searchVocDetails: {
      handler(newValue) {
        this.SearchVocDetails = newValue;
      },
    },
    vocId: {
      handler(newValue) {
        this.VocId = newValue;
      },
    },
    vocNext: {
      handler(newValue) {
        this.VocNext = newValue;
      },
    },
  },
};
</script>

<style lang="scss" scoped>
  .asideTab{
    margin-top: 20px;
  }
</style>
